<template>
	<div class="login-outcontainer">
		<section style="position: fixed;width: 100%;top: 0; left: 0;z-index: 0; ">
			<mu-card-media >
				<img :src="loginBg" style="width: 100%;"/>
			</mu-card-media>
		</section>
		<section style="position: fixed;width: 100%;height: 100%;z-index: 2;background-color:rgba(0,0,0,.05)"></section>
		<section style="background-color:rgba(255,255,255,0); width: 100%; height: 100%; position:fixed; z-index:10;left:0;top: 0;"></section>
		<section class="top-swiper-container">
			<section style="width: 2%; background: #fff; position: relative;"></section>
			<section class="center-mid login-notice-icon" @click="test('图标')">
				<mu-icon  value="volume_mute" :size="22" color="#2799f3" style="position: relative;"  />
			</section>
			<swiper :options="swiperOption" class="swiper-box" style="background:#fff;" >
				<!--<swiper-slide class="swiper-item swiper-no-swiping" >
					<span class="login-swiper-info auto-ellipsis" @click="test('点我')">{{loginNotice[0].BT}}</span>
				</swiper-slide>-->
				<swiper-slide class="swiper-item swiper-no-swiping " v-for="(item,index) in loginNotice">
					<span class="login-swiper-info auto-ellipsis" @click="gotoAddress('notice-content/'+item.schoolAnnouncementId)">{{item.schoolAnnouncementTitle}}</span>
					<span style="width: 20%; height: 2.6rem; line-height: 2.6rem;" @click="gotoAddress('notice-content/'+item.schoolAnnouncementId)" >{{cutCharacter(item.schoolAnnouncementUpdateTime)}}</span>
				</swiper-slide>
			</swiper>
			<section  class="login-icon-right center-mid" @click="open()">
				<mu-icon color="#373737" :size="22" value="keyboard_arrow_right" />
			</section>
			<section style="width: 2%; background: #fff; position: relative; "></section>
			
		</section>
		<section class="loginUpd-container" >
			<section style="display: flex;  height: 11rem; flex-direction: column;" class="center-mid">
				<section class="login-logo" style="margin-bottom:0;">
	        			<!--<img :src="bzLogo" style="width: 100%;"/>-->
	        	</section> 
	        	<section style="width: 58%;">
	        		<!--<img :src="logoFont" style="width: 100%;" />-->
	        	</section>
	        	<section style="width: 58%;">
	        		<img :src="logoInfoName" style="width: 100%;" />
	        	</section>
			</section>
			<section style="margin-top: 2rem;width: 100%;">
				
				<!--<section class="login-frame center-mid" >
					<label>账号</label>
					<input type="text" placeholder="请输入用户名" v-model="username"  />
				</section>
				<section class="login-frame center-mid" >
					<label>密码</label>
					<input type="password" placeholder="请输入密码" v-model="password"  />
				</section>-->
				<section class="login-frame-new center-mid" >
					<mu-icon value="account_circle" color="white" style="padding-right: 2rem;" />
					<input type="text" placeholder="请输入用户名" v-model="username"   />
				</section>
				<section class="login-frame-new center-mid" style="margin-top: 0.6rem;">
					<mu-icon value="lock_outline" color="white" style="padding-right: 2rem;" />
					<input type="password" placeholder="请输入密码" v-model="password" />
				</section>
				
				<mu-flat-button class="mu-loginBtn" labelClass="mu-label" label="登录" @click="login2" />
				</mu-flat-button>
				
			</section>
			
		</section>
		<div class="notice-list-container"  v-show="openState">
			<section class="top-close">
				<span style="flex: 1;"></span>
		        <span class="title-span">消息列表</span>
				<mu-icon color="#373737" :size="22" value="close" style="flex: 1; text-align: center; cursor: pointer;" @click="close()" />
			</section>
			<mu-list style="position: relative;margin-top: 3rem; background-color: #fff;">
			    <!--<mu-list-item v-for="(item,index) in totallMessage" key="item" :title="item.BT" @click="gotoAddress('notice-content/'+item.BH)" :describeText="item.FBSJ">
			      <mu-avatar icon="assignment" backgroundColor="blue" slot="leftAvatar" />
			    </mu-list-item>-->
			    <mu-list-item v-for="(item,index) in allNotice" key="item" :title="item.schoolAnnouncementTitle" :to="'notice-content/'+item.schoolAnnouncementId" :describeText="item.schoolAnnouncementUpdateTime.slice(0,10)">
			      <mu-avatar icon="assignment" backgroundColor="blue" slot="leftAvatar" />
			    </mu-list-item>
		  	</mu-list>	
		</div>
		<!--<mu-toast v-if="toast" :message="message"  />-->
		<transition name="fade">
	      <div v-show="toast" class="selfToast-container" >
	      		<div class="selfToast" >
	      			{{message}}
	      		</div>
	      </div>
      	</transition>
	</div>
</template>

<script>
	import * as types from './store/types'
	export default {
		data(){
		    return {
		      swiperOption: {
		          pagination: '.swiper-pagination',
		          direction: 'vertical',
		          slidesPerView: 1,
		          paginationClickable: true,
		          spaceBetween: 0,
		          mousewheelControl: false,
		          paginationType: 'custom',
		          slidesPerGroup: 1,
		          loop:false,
		          autoplay:3500,
		          speed:400,
//		          noSwiping : true
		        },
		      username:'',
		      toast:false,
		      password:'',
		      token: null,
		      loginBg:'static/images/loginBg3.png',
		      headicon1:'static/images/headicon1.jpg',
		      bzLogo:'static/images/bzlogo2.0.png',
		      logoFont:'static/images/logo-font.png',
		      logoInfoName:'static/images/logoInfo-name2.png',
      		  loginNotice:[],
      		  rightPopup: false,
      		  openState:false,
      		  totallMessage:[],
      		  allNotice:[],
      		  message:''
		    }
	    },
	    mounted(){
//	       var obj = new WxLogin({
//	        id:"login_container", 
//	        appid: "wxdd1d8b84b6e286ed", 
//	        scope: "snsapi_login", 
//	        redirect_uri: "http%3A%2F%2Fjx.iyx.net",
//	        state: "asd5",
//	        style: "black",
//	        href: ""
//	      });
			var Url=decodeURI(window.location.href)
			var urlLocation=window.location.href.indexOf('?')
			var urlLocation2=window.location.href.indexOf('&')
			var userNameVal=Url.slice(urlLocation+1,urlLocation2);
			var passwordVal=Url.slice(urlLocation2+1,Url.length);
			
			if(window.localStorage.userNumber){
				this.username=window.localStorage.userNumber
			}else{
				this.username=''
			}
			this.loadMessage()
			this.loadAllNews()
	    },
	    watch:{
	    	$route(){
				
		    }
	    },
	    methods: {
	    	cutCharacter(val){
	    		return val.slice(5,10)
	    	},
	    	showToast (msg) {
		        this.message = msg
		        this.toast = true
		        if (this.toastTimer) clearTimeout(this.toastTimer)
		        this.toastTimer = setTimeout(() => { this.toast = false }, 1000)
		    },
	    	login2(){
	    		let that = this
	    		that.axios.post('/iyx/Login/phoneLogin',{
	    			"uid":that.username,
	    			"password":that.password
	    		}).then(function (response) {
	           		if(response.data.erroInfo=='success'){
	           			if(typeof(response.data.teacherInfo)=='undefined'){
	           				console.info('登录学生')
	           				var _url=window.location.href
							var index=_url.lastIndexOf("#")
			    			var lastPath=_url.substring(index+1)
		           			localStorage.userNumber=response.data.uid
		           			localStorage.classId=response.data.classId
		           			localStorage.userName=response.data.studentName
		           			localStorage.token=response.data.token
		           			that.token=response.data.token
		           			localStorage.userJurisdiction=JSON.stringify(response.data.MenuList)
		           			setTimeout(function(){
		           				if(lastPath!='/loginPulic'){
				          			that.$router.push({
					            		path: '/index'
					          		})
					          	}else{
					          		that.$router.push({
						            	path: '/index'
						          	})
					          	}
		           			},1480)
	           			}else{
	           				var _url=window.location.href
							var index=_url.lastIndexOf("#")
			    			var lastPath=_url.substring(index+1)
			    			//这样写不标准
			    			localStorage.userNumber=response.data.teacherInfo.teacherId
		           			localStorage.userName=response.data.teacherInfo.teacherName
		           			localStorage.token=response.data.token
		           			that.token=response.data.token
//		           			localStorage.userJurisdiction=JSON.stringify(response.data.MenuList)
		           			setTimeout(function(){
		           				if(lastPath!='/login'){
				          			that.$router.push({
					            		path: '/index_teacher'
					          		})
					          	}else{
					          		that.$router.push({
						            	path: '/index_teacher'
						          	})
					          	}
		           			},1480)
	           				console.info('登录老师')
	           			}
//	           			var _url=window.location.href
//						var index=_url.lastIndexOf("#")
//		    			var lastPath=_url.substring(index+1)
//	           			localStorage.userNumber=response.data.uid
//	           			localStorage.classId=response.data.classId
//	           			localStorage.userName=response.data.studentName
//	           			localStorage.token=response.data.token
//	           			that.token=response.data.token
//	           			localStorage.userJurisdiction=JSON.stringify(response.data.MenuList)
//	           			setTimeout(function(){
//	           				if(lastPath!='/login'){
//			          			that.$router.push({
//				            		path: '/index'
//				          		})
//				          	}else{
//				          		that.$router.push({
//					            	path: '/index'
//					          	})
//				          	}
//	           			},1480)
	           			that.showToast('登录成功')
	           			
	           		}else if(response.data.erroInfo=='账号或密码不正确'){
	           			that.showToast('账号或密码不正确')
	           		}
	  	       }).catch(function(error){
	  	       			that.showToast('连接超时请检查连接')
	  	       			console.info(error)
	  	       })
	    	},
	      	login(){
	      		let that = this
	      		that.axios.post('/gleenSoft-base/login_login',{username:that.username,password:that.password}).then(function (response) {
	            if(response.data.result=='身份验证失败！'){
	              that.showToast('验证失败')
	            }else{
//	              alert(123)
				  var _url=window.location.href
				  var index=_url.lastIndexOf("#")
    			  var lastPath=_url.substring(index+1)
		  		 
//	              that.token = response.data.token
	              let identity=(that.username.length==12)?'Student':'Teacher';
	              localStorage.userIdentity = identity
	              
//	              localStorage.isCommissary = response.data.user_info.C_GROUPID!=null
//	              localStorage.userInfo = JSON.stringify(response.data.user_info)
	              localStorage.isBotNav= true
	              that.$store.commit(types.LOGIN, that.token)
//		          	let redirect = decodeURIComponent(that.$route.query.redirect || '/index');
		          	if(lastPath!='/login'){
		          		 
		          		that.$router.push({
			            	path: '/index'
			          	})
		          	}else{
		          		that.$router.push({
			            	path: '/index'
			          	})
		          	}
		          	
	            }
	  	       })
	      	},
	      	toggle(){
		      this.open = !this.open
		    },
		    handleClose(e){
		      this.open = false
		    },
		    clickClose(){
		    	this.open = false
		    },
//		    loadTzgg(){
//	  			let that = this
//				that.axios.get('/gleenSoft-base/xxgl/tzgg/list?showCount=5').then(function (response) {
//		        	that.loginNotice = response.data.result
//		        	console.info(response.data.result)
//		      	}).catch(function (error) {
//		        	console.log(error);
//		      	});
//	  		},
			loadMessage(){
				let that = this
				//通知公告todo
				that.axios.get('iyx/announce/SelectFew?count=2').then(function (response) {
					that.loginNotice=response.data
		      	}).catch(function (error) {
		        	console.log(error);
		      	});
			},
	  		loadParams(){
				let that = this
				that.axios.get('/gleenSoft-base/xxgl/tzgg/list').then(function (response) {
		        	that.totallMessage = response.data.result
		      	}).catch(function (error) {
		        	console.log(error);
		      	});
			},
			loadAllNews(){
				let that = this
				that.axios.get('iyx/announce/SelectAll?token='+localStorage.token).then(function (response) {
		        	that.allNotice = response.data
		      	}).catch(function (error) {
		        	console.log(error);
		      	});
			},
	  		gotoAddress(path){
				this.$router.push(path)
	      	},
	      	sendParams(pathData,nameData) {
		        this.$router.push({
		            path: pathData, 
//		            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',
					name:nameData,
		            params: { 
		                name: 'name', 
		                dataObj: this.msg
		            }
		            /*query: {
		                name: 'name', 
		                dataObj: this.msg
		            }*/
		        })
		     },
	      	test(data){
	      		alert(data)
	      	},
	      	open (position) {
	      		this.openState=true
		    },
		    close (position) {
		    	this.openState=false
		    }
		}
	}
</script>

<style scoped>
	
.title-span{
	flex: 5;
	text-align: center;
	font-size: 1.1rem;
}
.selfToast-container{
 	position:fixed; 
 	width: 100%;
 	height: 100%; 
 	background-color: rgba(0,0,0,0);
 	z-index: 200;
 	left: 0; 
 	top: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 .selfToast{
 	height: 2.6rem;
 	line-height: 2.6rem;
 	background-color: #757575 !important;
 	text-align: center;
 	padding: 0 1rem;
    border-radius:5px !important;
    color: #fff;
 }
 .fade-enter-active,.fade-leave-active{
 	transition: all 0.6s ease-in-out
 }
 .fade-enter-active{
 	opacity: 1;
 }
 .fade-leave-active{
 	opacity: 0;
 }
 .fade-enter,.fade-leave{
 	opacity: 0;
 }	
input[placeholder]{
	color: #989898 !important;
}
ul li{
	list-style: none;
}
.loginUpd-container{
	position: relative;
	z-index: 120; 
	margin: 1rem auto 0 auto;  
	width: 90%;
}
.login-logo{
	width: 5rem; 
	height: 5rem; 
	border-radius: 50%; 
	overflow: hidden; 
	/*border:2px solid white*/
}
.login-logo-title{
	color: #fff;
	line-height: 1.8rem;
}
.login-logo-title:nth-child(2){
	margin-top: 0.4rem 
}
.login-strip{
	display: flex; 
	flex-direction: row; 
	border-bottom: 1px solid #fff; 
	font-size: 1.1rem;
	margin-top: 1rem;
}
.login-frame{
	background-color: #fff;
	display: flex; 
	flex-direction: row; 
	font-size: 1rem;
	padding: 2px 0;
	font-family: "微软雅黑";
}
.login-frame:nth-child(1){
	border-bottom: 1px solid #b5b3be;
}

.login-strip input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#fff;
	color:#fff
}


.login-frame label{
	flex: 1.2; 
	color: #9e9e9e;
	text-align: center;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
/*border: 1px solid #CCC!important;*/
}
.login-frame label{
	color:#989898
}
.login-frame input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#3b3b3b;
	color:#3b3b3b !important;
	 /*-webkit-box-shadow: 0 0 0 0.8rem #fff inset;*/
}
.btn-loginUpd{
	color: white;
	line-height: 3rem;
	border-radius: 3px;
	height: 3rem;
	background-color: #3399fe;
	width: 100%;
	border: none;
	margin-top: 3rem;
	font-size: 1rem;
	outline: none;
}
.mu-loginBtn{
	color: white !important;
	border-radius: 3px !important;
	height: 3rem !important;
	background-color: #3399fe !important;
	width: 100%;
	margin-top: 2rem !important;

}
span.mu-flat-button-label.mu-label{
	font-size: 1rem;
}
/*.login-strip input::-webkit-input-placeholder { 
    color:   #fff;
}*/
 .swiper-box {
    width: 78%;
    height: 2.6rem;
    /*margin: 0 auto;*/
   margin: 0;
  }
  .swiper-item {
    height: 2.6rem;
    margin: 0;
    padding: 0;
    text-align: center;
    /*font-size: 18px ;*/
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .login-swiper-info{
  		width: 80%; 
  		height: 2.6rem; 
  		text-align: left;
  		display:block;
  		/*margin:0 5% 0 5%;*/
  		line-height: 2.6rem;
  		z-index:240;
  		position: relative;
  }
  .auto-ellipsis{
  	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .login-icon-right{
  	 width: 10%; 
  	 height: 2.6rem; 
  	 background:#fff;
  	 display: flex;
  }
  .top-swiper-container{
  	height: 2.6rem; 
  	width: 100%; 
  	background: #fff; 
  	margin: 0;
  	display: flex; 
  	flex-direction: row;
  	position: relative;
  	z-index: 150;
  	color: #3b3b3b;
  	font-size: 0.8rem;
  }
  .top-slidedown{
  	 width: 100%;
  	 position: absolute;
  	 left: 0;
  	 top:2.6rem; 
  	 background-color: #fff; 
  	 z-index: 150;
  }
  .top-slidedown ul li{
  	line-height: 1.6rem;
  }
  .top-slidedown ul li:nth-child(1){
  	 margin-top: 0.8rem;
  }

 .swiper-wrapper{
  	border-left: 1px solid #fff !important;
  }
  .login-notice-icon{
  	  width: 8%;
  	  height: 2.6rem; 
  	  background:#fff; 
  	  display: flex; 
  	  color: #2799f3;
  }
  .demo-popup-right{
	  display: flex;
	  width: 100%;
	  height: 100%;
	  align-items: center;
  }
  .top-close{
  	position: fixed;
	z-index: 202;
	top: 0;
	left: 0;
	width: 100%; 
	height: 3rem; 
	background: white; 
	display: flex; 
	flex-direction: row; 
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 4px rgba(202,202,202,0.2);
  }
  .swiper-first{
  	background-color: hotpink;
  	position: absolute;
  	top: 2.6rem;
  	left: 0;
  	z-index: 99;
  }
  .notReal-first{
  
  }
  .notice-list-container{
  	position:absolute;
  	width: 100%; 
  	height: 100%; 
  	background: #fff;
  	top: 0; 
  	left: 0;
  	z-index: 200;
  }
  .mu-toast{
    background-color: #757575 !important;
    /*top:50%;*/
    text-align: center;
    top: 50% !important;
    width: auto;
    left: 50%;
    padding: 0 1rem!important;
    /*width:38% !important;*/
    border-radius:5px !important;
    /*left: 31.5% !important;*/
  }
 .center-mid{
	justify-content: center;
	align-items: center;
}
.login-frame-new{
	background-color:rgba(255,255,255,0);
	display: flex; 
	flex-direction: row; 
	font-size: 1rem;
	padding: 0;
	font-family: "微软雅黑";
	border-bottom: 1px solid rgba(255,255,255,0.6);
}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 50px white inset;
	/*border: 1px solid #CCC!important;*/
}
.login-frame-new input{
	flex: 6; 
	height: 3rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:white;
	color:white !important;
	font-size: 0.9rem;
}

  /*.swiper-item:nth-last-child(1){
  	background-color: sandybrown;
  	position: relative;
  	z-index: 300;
  }*/
</style>